1 00:00:01,020 --> 00:00:02,260 Hello and welcome. 2 00:00:02,340 --> 00:00:07,640 In this lecture we are going to create the stylin for our project. 3 00:00:07,650 --> 00:00:14,700 He is in csx to save time hire for it he added. 4 00:00:14,710 --> 00:00:21,340 The CEO says could to our -- so let me just run through them with you. 5 00:00:21,510 --> 00:00:29,820 Every little style an element you need to define the selector which is the item you are trying to start. 6 00:00:30,090 --> 00:00:33,300 Then you separate. 7 00:00:33,290 --> 00:00:36,100 Now you have the the curly braces. 8 00:00:36,270 --> 00:00:43,300 That's the opening and that's the closing in between the curly braces is where you define the stylin 9 00:00:43,320 --> 00:00:51,010 you want to use for that element online to hear the body is the selector which is the element I want 10 00:00:51,000 --> 00:00:51,980 to start. 11 00:00:52,200 --> 00:01:00,500 And these are the values the properties are on the left and the values are on them. 12 00:01:00,660 --> 00:01:09,780 You separate the property from the value with a on and then once you've defined the value you need to 13 00:01:09,870 --> 00:01:14,340 end it with a semi or so I call on if you don't do that. 14 00:01:14,340 --> 00:01:20,010 It will not apply the stylee to the element saw line 3 there. 15 00:01:20,010 --> 00:01:27,390 I've got a text a line property and have set the value to the centre. 16 00:01:27,580 --> 00:01:36,180 Well that means it all sent to any text for the body of a DAT element. 17 00:01:36,290 --> 00:01:41,930 Line 4 is the back ground which is the background colour. 18 00:01:42,150 --> 00:01:45,290 I've said to white F F F. 19 00:01:45,300 --> 00:01:49,670 It's also the same thing as white in Hexa value. 20 00:01:49,810 --> 00:01:52,380 A decimal values in 5. 21 00:01:52,380 --> 00:02:01,350 I've defined a font family font family is naturally the font type defined sense serif as the first choice 22 00:02:01,740 --> 00:02:05,230 and if that's not available it will default to you. 23 00:02:05,430 --> 00:02:11,450 These are one or the other should be available on most computers. 24 00:02:11,460 --> 00:02:20,850 Line 6 is the font weight font with propertied physically is used to set how thick or thin you want 25 00:02:20,850 --> 00:02:24,060 the characters in the text to be displayed. 26 00:02:24,300 --> 00:02:27,390 Okay so there are several ways you can do this. 27 00:02:27,390 --> 00:02:30,820 You can set it to bowl order. 28 00:02:30,820 --> 00:02:32,910 Values can include no more. 29 00:02:32,910 --> 00:02:36,540 Or you can actually set in number. 30 00:02:37,050 --> 00:02:45,960 If you are setting in no value you can do that to define the thickness of the characters. 31 00:02:45,960 --> 00:02:59,070 If you specify a hundred like abdon here on line 20 it defies the thickness of the characters saw the 32 00:02:59,160 --> 00:03:04,340 signatures from two form read for example is the same as normal. 33 00:03:04,350 --> 00:03:10,540 If I was to set these values from ball to normal is the same as same instead of board. 34 00:03:10,560 --> 00:03:20,400 I always said that to instead of normal I said that to 400 so bald is equivalent to 700. 35 00:03:20,400 --> 00:03:23,460 Notice here in line 20 years just 100. 36 00:03:23,640 --> 00:03:29,160 So to make the text bold is equivalent to seven hundred ten. 37 00:03:29,160 --> 00:03:37,380 Anything above dad increases the thickness of the characters line 9. 38 00:03:37,410 --> 00:03:46,710 I am styling they hate one selector which is a title for the web page and giving it a colour or museum 39 00:03:46,710 --> 00:03:49,890 a hexadecimal value for the colour font. 40 00:03:49,890 --> 00:03:57,620 Wait again I'm using bold which is equivalent to 700 font size which is the atl's size of the font of 41 00:03:57,630 --> 00:03:58,440 text. 42 00:03:58,620 --> 00:04:02,160 I've set that to 50 pixels. 43 00:04:02,580 --> 00:04:17,190 I have set the margin online 13 to 1 3 5 0 and 20 pixels margin basically refers to the space outside 44 00:04:17,460 --> 00:04:21,450 the limit and there's usually four values. 45 00:04:21,450 --> 00:04:29,610 You've got the top the right the bottom and the left so you apply it in that order. 46 00:04:29,640 --> 00:04:40,220 Top right bottom left the flag does have all is specified three values for on line 13. 47 00:04:40,230 --> 00:04:43,440 Those three values all apply. 48 00:04:43,500 --> 00:04:53,420 The first value goes to the top top the second goes to the right hand the third goes to the bottom right. 49 00:04:53,640 --> 00:04:57,260 So the first value goes to the top. 50 00:04:57,260 --> 00:04:59,330 The second sorry will go. 51 00:04:59,380 --> 00:05:09,820 So the right and the left margin are right and then the last value will go to the bottom whereby specified 52 00:05:09,820 --> 00:05:13,530 only three values the first goes to the top. 53 00:05:13,570 --> 00:05:20,730 The second value goes to the right and the left and the last goes to the bottom so that's how you specify 54 00:05:20,750 --> 00:05:21,650 the margin. 55 00:05:21,870 --> 00:05:25,300 Padding is the same way you apply it in the same way. 56 00:05:25,300 --> 00:05:29,910 Bob padian refers to the space inside the element. 57 00:05:31,720 --> 00:05:35,270 Don't forget to end your values with a semicolon. 58 00:05:35,480 --> 00:05:39,640 And don't forget to separate the properties from the values with a colon. 59 00:05:39,660 --> 00:05:48,800 If that is not applied properly like 16 to twenty three I have caught Heidi now time styling. 60 00:05:48,800 --> 00:05:56,330 The idea here the ideals clock Dave and I've applied for Lane propertys values. 61 00:05:56,530 --> 00:06:00,680 Some of them I've already gone through so I'm not going to run through them again. 62 00:06:00,880 --> 00:06:10,450 Line 19 display means I want the Elemeno displayed as a block in line so it will show the hours days 63 00:06:10,450 --> 00:06:13,510 minutes on the block in line. 64 00:06:13,510 --> 00:06:14,110 Can't wait. 65 00:06:14,110 --> 00:06:22,620 I've already covered text a line covered font size I've already covered like 25 is interesting. 66 00:06:22,630 --> 00:06:30,330 I haven't quite the same Dave but notice I got a great advance sign after it. 67 00:06:31,850 --> 00:06:33,030 The greater than sign. 68 00:06:33,060 --> 00:06:40,500 Online 25 means it's applying to the immediate chewed trend of dat D. 69 00:06:40,690 --> 00:06:49,010 All right so which means apply this time in here to the immediate should rent of this clogged the cord 70 00:06:49,150 --> 00:06:49,820 did. 71 00:06:50,060 --> 00:06:56,150 So if we go to our CML this is the clock. 72 00:06:56,300 --> 00:07:07,470 We've got the club here okay and this clock has got a deaves and is also got Spanish elements. 73 00:07:07,550 --> 00:07:17,950 That's what it's referring to whereby you have say for example a three hour level of D. 74 00:07:18,350 --> 00:07:26,990 The style in the styling will only affect the second level of div and not the turd. 75 00:07:26,990 --> 00:07:35,870 However if I was to use a space between the selectors instead of the greater than sign then it will 76 00:07:36,020 --> 00:07:40,630 affect both the second and third level. 77 00:07:40,650 --> 00:07:48,620 Deaves So this space usually means if you just create a space rather than the greater than sign it will 78 00:07:48,620 --> 00:07:52,990 apply to all the levels of that element. 79 00:07:53,960 --> 00:08:02,310 Please note that the greater down selektah is not supported in lower versions of Internet Explorer. 80 00:08:02,590 --> 00:08:08,470 Okay but he should work in other higher versions of it. 81 00:08:08,990 --> 00:08:13,310 Again here line 32 have used the Deve here and gritter done sign. 82 00:08:13,500 --> 00:08:18,450 What that means it will apply this time until the child element of the D. 83 00:08:18,500 --> 00:08:19,920 That is called span. 84 00:08:20,040 --> 00:08:28,030 Okay so that means it will apply to that to the child element bodies radios refers to get around at 85 00:08:28,040 --> 00:08:28,580 corners. 86 00:08:28,580 --> 00:08:36,040 It makes the elements gives it a rounded edge background I've already discussed this play like we have 87 00:08:36,040 --> 00:08:37,310 already mentioned. 88 00:08:37,350 --> 00:08:44,850 Padding refers to the space inside the element and it pretty much works the same way as the margin. 89 00:08:45,080 --> 00:08:49,190 So it has the four corners that I mentioned previously. 90 00:08:49,490 --> 00:08:50,160 Font size. 91 00:08:50,180 --> 00:08:57,160 I've already discussed so I'll just save this and then we can see what our page looks like. 92 00:08:57,530 --> 00:09:00,170 Excellent So this is what this time end looks like. 93 00:09:00,170 --> 00:09:01,750 Not too bad. 94 00:09:01,760 --> 00:09:03,910 Notice the end of the days. 95 00:09:03,910 --> 00:09:05,420 None of these is shown yet. 96 00:09:05,420 --> 00:09:10,440 Will implement that using javascript so that's fit for this lecture. 97 00:09:10,550 --> 00:09:12,170 Thank you for watching. 98 00:09:12,170 --> 00:09:13,310 Bye for now.